<template>
  <el-dialog
    v-model="visible"
    class="component-shop-edit-brand header-no-padding"
    width="80%"
    :show-close="false"
    top="8vh"
  >
    <div class="">
      <div class="popup">
        <div class="title">
          <div class="text">
            {{ $t('shopProcess.editSigningBrand') }}
          </div>
          <div class="tips">
            {{ $t('shopProcess.preSigned') }}
            <span class="bold">{{ totalCount }}</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，{{ $t('shopProcess.mostAdd') }}
            <span class="bold">50</span>
            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
          </div>
          <div
            class="close-btn"
            @click="closePopup"
          >
            <el-icon><Close /></el-icon>
          </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-form
            ref="searchFormRef"
            :inline="true"
            :model="searchForm"
            label-width="auto"
            @submit.prevent
          >
            <div class="input-row margin-bottom-none">
              <el-form-item
                prop="name"
                :label="$t('shopProcess.brandName')"
              >
                <el-input
                  v-model="searchForm.name"
                  :placeholder="$t('shopProcess.brandName')"
                />
              </el-form-item>
              <el-form-item>
                <div
                  class="default-btn primary-btn"
                  @click="onSearch"
                >
                  {{ $t('product.search') }}
                </div>
                <div
                  class="default-btn"
                  @click="onResetSearch()"
                >
                  {{ $t('product.reset') }}
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div class="content">
          <!-- 已签约品牌列表 -->
          <div class="main-container right-box">
            <div class="table-con table-box">
              <!-- height="575" -->
              <el-table
                :data="signBrandList"
                header-cell-class-name="table-header"
                width="100%"
              >
                <el-table-column
                  prop="name"
                  :label="$t('shopProcess.brandName')"
                >
                  <template #default="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="firstLetter"
                  :label="$t('shopProcess.firstLetter')"
                />
                <el-table-column
                  prop="imgUrl"
                  :label="$t('shopProcess.brandLogo')"
                >
                  <template #default="scope">
                    <el-image
                      class="rotating-img"
                      preview-teleported
                      :src="checkFileUrl((scope.row.imgUrl))"
                      :preview-src-list="[checkFileUrl(scope.row.imgUrl)]"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qualifications"
                  :label="$t('shopProcess.brandQualifications')"
                >
                  <template #default="scope">
                    <div class="business-qual">
                      <el-image
                        v-for="(img,index) in scope.row.imgs"
                        :key="index"
                        class="rotating-img"
                        :src="checkFileUrl(img)"
                        preview-teleported
                        :preview-src-list="checkFileUrl(scope.row.imgs)"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="brandStatus"
                  :label="$t('shopProcess.brandStatus')"
                >
                  <template #default="scope">
                    <div
                      v-if="scope.row.brandStatus === 1"
                      class="tag-txt"
                    >
                      {{ $t('publics.normal') }}
                    </div>
                    <div
                      v-if="scope.row.brandStatus === 0"
                      class="tag-txt red-tag-txt"
                    >
                      {{ $t('publics.LowerShelf') }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  :label="$t('remindPop.operation')"
                  width="100px"
                  align="center"
                >
                  <template #default="scope">
                    <div
                      class="default-btn text-btn"
                      @click="deleteBrand(scope)"
                    >
                      {{ $t('remindPop.delete') }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                v-if="signBrandList.length"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                @size-change="onPageSizeChange"
                @current-change="onPageChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

let shopId = 0
const visible = ref(false)
// 初始化
const init = (shopIdPar) => {
  shopId = shopIdPar
  visible.value = true
  getSignBrandList()
}

const signBrandList = ref([])
const totalCount = ref(null) // 总数量
const searchForm = ref({}) // 搜索
/**
 * 获取签约品牌列表
 */
const getSignBrandList = () => {
  http({
    url: http.adornUrl('/platform/brand/pageSigningByShopId'),
    method: 'get',
    params: http.adornParams(Object.assign({
      shopId,
      current: page.currentPage,
      size: page.pageSize,
      status: 1 // 签约状态：1：已通过 0待审核 -1未通过
    }, searchForm.value))
  }).then(({ data }) => {
    signBrandList.value = handleImgData(data.records)
    page.total = data.total
    page.currentPage = data.current
    if (totalCount.value === null) {
      totalCount.value = data.total
    }
  })
}

// 处理数据图片
const handleImgData = (dataList) => {
  dataList.forEach(item => {
    item.imgs = item.qualifications ? item.qualifications.split(',') : []
  })
  return dataList
}

/**
 * 删除选中品牌
 */
const deleteBrand = (scope) => {
  ElMessageBox.confirm($t('shopProcess.deleteSigningBrandTips') + '[' + scope.row.name + ']?', $t('chat.tips'), {
    confirmButtonText: $t('webInfoConfig.determine'),
    cancelButtonText: $t('webInfoConfig.cancellation'),
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/platform/brandShop'),
      method: 'DELETE',
      params: http.adornParams({
        brandId: scope.row.brandId,
        shopId
      })
    }).then(() => {
      ElMessage({
        message: $t('shopProcess.deleteSigningBrandSuccess'),
        type: 'success',
        duration: 1000,
        onClose: () => {}
      })
      getSignBrandList()
      totalCount.value--
    })
  }).catch(() => {})
}

const emit = defineEmits(['closePopup'])
/**
 * 关闭弹窗
 */
const closePopup = () => {
  emit('closePopup', 'brand')
}

const onSearch = () => {
  page.currentPage = 1
  getSignBrandList()
}

const searchFormRef = ref(null)
/**
 * 重置表单
 */
const onResetSearch = () => {
  searchFormRef.value.resetFields()
  searchForm.value = {}
}

const onPageSizeChange = (val) => {
  page.pageSize = val
  getSignBrandList()
}
const onPageChange = (val) => {
  page.currentPage = val
  getSignBrandList()
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>
@use "index";
</style>
